<template>
	<view class='mine'>
		<view class="userInfo">
			<image class="avatar" :src='userInfo.headimgurl'></image>
			<view class="name">{{userInfo.nickname || userInfo.unionid}}</view>
		</view>
		
		<view class="vipBoard padding">
			<view class="vip" v-if='userInfo.vip' @click='toVip'>
				<view class="title">
					尊敬的会员
					<text class='small'>您已拥有以下特权</text>
				</view>
				<view class="rights row">
					<view class="col" v-for="(item,index) in rights" :key='item.text'>
						<view class="cont">
							<image class="icon" mode='aspectFit' :src='item.icon'></image>
							{{item.text}}
						</view>
					</view>
				</view>
				<view class="handle">
					<view class="text">
						有效期至{{userInfo.maxEffectDay}}，更多权益敬请期待
					</view>
				</view>
			</view>
			<view class="openVip" v-else>
				开通VIP，解锁全部功能，帮你解决一切问题
				<view class="openVipBtn" @click='toVip'>
					<image src="/static/lock_black.png" class='lock' mode="aspectFit"></image>
					立即解锁
				</view>
			</view>
		</view>
		
		<customTitle>其他</customTitle>
		<view class=" others">
			<view class="othersItem" v-for="(item,index) in others" :key='item.text' @click="clickItem(item)">
				<view class="left">
					<image class="icon" :src='item.icon' mode='aspectFit'></image>
					{{item.text}}
				</view>
				<image class="arrow" src="../../static/newicons/Frame-8.png" mode="aspectFit"></image>
			</view>
			<!-- <view class="row">
				<view class="col" v-for="(item,index) in others" :key='item.text'>
					<image class="icon" :src='item.icon' mode='aspectFit'></image>
					{{item.text}}
				</view>
			</view> -->
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				rights: [
					{text:'无限次数使用',icon:'/static/newicons/Frame-7.png'},
					{text:'响应速度翻倍',icon:'/static/newicons/Frame-6.png'},
					{text:'解锁所有模型',icon:'/static/newicons/Frame-5.png'},
				],
				others: [
					{text:'分享到微信',icon:'/static/newicons/Frame-10.png',type: 1},
					{text:'关于我们',icon:'/static/newicons/Frame-9.png',type: 2},
					{text:'用户协议',icon:'/static/newicons/Frame-11.png',type: 3},
					{text:'隐私政策',icon:'/static/newicons/Frame-12.png',type: 4},
					// #ifdef APP
					{text:'退出登陆',icon:'/static/newicons/Frame-13.png',type: 'logout'},
					// #endif
				],
			};
		},
		computed: {
			userInfo() {
				return this.$store.state.userInfo
			},
		},
		onShow() {
			this.$store.dispatch('getUserInfo')
		},
		methods: {
			// 点击类目
			clickItem(item) {
				if(item.type === 1) {
					// // 客服电话
					// uni.makePhoneCall({
					// 	phoneNumber: this.userInfo.officialPhone
					// })
					// 分享到微信
					uni.share({
						provider: "weixin",
						scene: "WXSceneSession",
						type: 0,
						href: "https://sta.gxkjec.com/tbs/index.html",
						title: "土拨鼠AI",
						summary: "我正在使用土拨鼠AI，赶快跟我一起来体验吧！",
						imageUrl: "https://sta.gxkjec.com/tbs/img/share.png",
						success: function (res) {
							console.log("success:" + JSON.stringify(res));
						},
						fail: function (err) {
							console.log("fail:" + JSON.stringify(err));
						}
					});
				}else if(item.type === 'logout') {
					uni.showModal({
						title: '提醒',
						content: '确定要退出吗？',
						success: res => {
							if(res.confirm) {
								this.$store.commit('setToken','')
								uni.redirectTo({
									url:'/pages/login/login'
								})
							}
						}
					})
				}else {
					uni.navigateTo({
						url: '/pages/webview/webview?type=' + item.type
					})
				}
			},
			toVip() {
				uni.navigateTo({
					url: '/pages/vip/vip'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.mine {
	padding: var(--status-bar-height) 30rpx 30rpx;
	.userInfo {
		padding-top: 40rpx;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		font-size: 36rpx;
		margin-bottom: 36rpx;
		color: #fff;
		.avatar {
			$s:90rpx;
			width: $s;
			height: $s;
			border-radius: 50%;
			margin-right: 16rpx;
		}
	}
	.padding {
		padding: 25rpx;
		border-radius: 20rpx;
		background: #32324A;
		box-shadow: 0px 0px 13px 0px rgba(0,0,0,0.51);
		margin-bottom: 20rpx;
	}
	.vipBoard {
		margin-bottom: 30rpx;
		.vip {
			overflow: hidden;
			.title {
				display: flex;
				justify-content: flex-start;
				font-size: 30rpx;
				color: #fff;
				margin-bottom: 30rpx;
				.small {
					font-size: 22rpx;
					opacity: 0.59;
					padding-left: 10rpx;
					align-self: flex-end;
				}
			}
			.rights {
				overflow: hidden;
				@include row(100rpx);
				padding-bottom: 20rpx;
				border-bottom: 2rpx solid rgba(242, 247, 250, 0.5);
				margin-bottom: 20rpx;
				.col {
					@include col(8,100rpx);
					.cont {
						text-align: center;
						font-size: 22rpx;
						color: #fff;
						.icon {
							display: block;
							$s: 62rpx;
							width: $s;
							height: $s;
							margin: 0 auto 18rpx;
						}
					}
				}
			}
			.handle {
				display: flex;
				justify-content: flex-start;
				align-items: center;
				.text {
					font-size: 24rpx;
					color: #FFFFFF;
					padding-right: 30rpx;
					flex: 1;
				}
			}
		}
	}
	.openVip {
		font-size: 28rpx;
		color: #fff;
		.openVipBtn {
			width: 240rpx;
			margin-left: auto;
			margin-top: 35rpx;
		}
	}
	.openVipBtn {
		flex-shrink: 0;
		$h: 76rpx;
		height: $h;
		line-height: $h;
		border-radius: math.div($h,2);
		text-align: center;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 28rpx;
		color: #000002;
		padding: 0 20rpx;
		background: linear-gradient(0deg, #32ECE0 0%, #57E78B 100%);
		.lock {
			width: 36rpx;
			height: 42rpx;
			margin-right: 12rpx;
		}
	}
	.others {
		margin-top: 15rpx;
		.othersItem {
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 87rpx;
			padding: 0 25rpx;
			border-radius: 20rpx;
			background-color: #32324A;
			margin-bottom: 15rpx;
			.left {
				display: flex;
				align-items: center;
				font-size: 25rpx;
				color: #ADADC3;
				.icon {
					$s: 48rpx;
					width: $s;
					height: $s;
					margin-right: 20rpx;
				}
			}
			.arrow {
				width: 32rpx;
				height: 25rpx;
			}
		}
	}
}
</style>
